<template>
	<el-card class="box-card">
		<div slot="header" class="search-div">
			<el-form :inline="true">
			  <el-form-item label="表名">
			    <el-input size="small" placeholder="请输入表名" v-model="searchWord" clearable/>
			  </el-form-item>
			  <el-form-item>
				<el-button type="success" plain @click="searchConidtion()"class="el-icon-search" size="small">查询</el-button>
				<el-button type="primary" plain  @click="showAddDialog()"class="el-icon-plus" size="small">创建子表</el-button>
				  </el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData.slice((page-1)*limit,page*limit)" border style="width: 100%" :highlight-current-row="true">
			<el-table-column prop="table_name" label="表名"></el-table-column>
			<el-table-column prop="columns" label="列数" width="120"></el-table-column>
			<el-table-column prop="created_time" label="创建时间" width="200"></el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<template slot-scope="scope">
					<el-button @click="search(scope.row)" type="text" size="small">查询表</el-button>
					<el-button @click="del(scope.row)" type="text" size="small">删除表</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 50,100]"
			:page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total" 
			style="margin-top: 10px;float: right">
		</el-pagination>
		
		<el-dialog :close-on-click-modal="false" :before-close="cancelAdd" :visible.sync="addDialog" title="创建子表">
			<el-form :model="tableForm" ref="tableForm" :rules="stableRules" label-width="80px">
				<el-form-item label="表名称" prop="tableName">
					<el-input v-model="tableForm.tableName" maxlength="150"></el-input>
				</el-form-item>
				<div v-for="(item, index) in tableForm.tags" :key="item.name" >
				    <el-form-item  :label="item.name" :prop="'tags.' + index +'.name'">
						<el-input v-model="item.value"></el-input>
				    </el-form-item>
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancelAdd" size="medium">取 消</el-button>
				<el-button type="primary" @click="confirmAdd('tableForm')" size="medium">确 定</el-button>
			</div>
		</el-dialog>
		
	</el-card>
</template>

<script>
	import {mapGetters} from 'vuex'
	import * as taos from '../../api/taosrestful'
	import bus from '../../utils/bus'
	export default {
		name: "taos_table",
		data() {
			return {
				addDialog: false,
				tableData: [],
				searchWord:'',
				tableForm: {'tableName':'','tags':[{'name':'','value':''}]},
				stableRules:{
					tableName: [{ required: true, message: '请输入表名称', trigger: 'blur' }]
				},
				payload: null,
				tableName:'',
				dbName:'',
				page: 1,
				limit:10,
				total:0
			}
		},
		created() {
			this.init()
			this.searchConidtion()
		},
		computed: {
			...mapGetters(['curObject'])
		},
		props: {
		    objId:''
		},
		methods: {
			init() {
				let tmpStable = JSON.parse(localStorage.getItem(this.objId))
				if(!tmpStable){
					this.$message({message: '请输入超表的表名',type: 'error',duration: 1000})
					return
				}
				let link = this.curObject.link
				this.payload = {ip: link.host,port: link.port,user: link.user,password: link.password}
				this.tableName = tmpStable.name
				this.dbName = this.curObject.dbName
				let that = this
				this.tableData = []
				taos.showTables(this.dbName, this.payload).then(data => {
					if (data.res) {
						that.tableData = []
						data.data.forEach(function(item){
							if(item.stable_name===that.tableName){
								if(that.searchWord){
									if(item.table_name.indexOf(that.searchWord)>=0){
										that.tableData.push(item)
									}else{
										that.tableData = []
									}
								}else{
									that.tableData.push(item)
								}
							}
						})
						this.total = that.tableData.length
					} else {
						this.$message({message: data.msg,type: 'error',duration: 1000})
					}
				})
			},
			handleSizeChange(val) {
				this.limit = val
				this.init()
			},
			handleCurrentChange(val) {
				this.page = val
				this.init()
			},
			searchConidtion(){
				this.page = 1
				this.limit = 10
				this.init()
			},
			cancelAdd(){
				this.addDialog = false
			},
			showAddDialog(){
				this.addDialog = true
				taos.describeStable(this.dbName,this.tableName,this.payload).then((data) => {
					if(data.res){
						let that = this
						that.tableForm.tags = []
						data.data.forEach(function(item){
							if(item.Note ==='TAG'){
								that.tableForm.tags.push({'name':item.Field,'value':''})
							}
						})
					}
				})
			},
			search(row) {
				let action = 'tsearch'
				let tableName = row.table_name
				bus.$emit('addTab', '查询表【'+tableName+'】', tableName, action)
				localStorage.setItem(action+'_'+tableName, JSON.stringify({'name':tableName,'isNew':false}))
			},
			confirmAdd() {
				this.$refs['tableForm'].validate((valid) => {
				  if (valid) {
					  this.addDialog = false
					  let tagsName = []
					  let tagsValue = []
					  this.tableForm.tags.forEach(function(item){
						 tagsName.push(item.name)
						 tagsValue.push(item.value)
					  })
					  let tagstr = '('+tagsName.join(",")+') TAGS ('+tagsValue.join(",")+')'
					  taos.createTableByStable(this.dbName,this.tableName,this.tableForm.tableName,tagstr, this.payload).then((response) => {
					  	this.$message({type: 'success',message: '操作成功!'})
					  	this.init()
					  })
				  }
				})
			},
			del(row) {
				this.$confirm('请确定是否删除表【' + row.table_name + '】', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					taos.dropTable(this.dbName,row.table_name, this.payload).then((response) => {
						this.$message({type: 'success',message: '操作成功!'})
						this.init()
					})
				}).catch(function(error) {
					console.log(error)
				})
			}
		}
	}
</script>